<template>
  <div>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <el-icon class="el-input__icon zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)">
            <ele-ZoomOut :size="20" />
          </el-icon>
          <span>{{ nowVal }}%</span>
          <el-icon class="el-input__icon zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)">
            <ele-ZoomIn />
          </el-icon>
        </div>
        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <div class="col-box begin-node">
            <el-button type="success" disabled size="large" circle>开始</el-button>
            <div class="condition-node-box"></div>
            <addNode v-model:childNode="nodeConfig" />
          </div>
          <nodeWrap v-if="nodeConfig != null" v-model:nodeConfig="nodeConfig" />
          <div class="end-node">
            <div class="end-node-text">
              <el-button type="info" disabled size="large" circle>结束</el-button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { getWorkFlowData } from '/@/api-services/workflow/api/index';
import nodeWrap from './component/nodeWrap.vue'
import addNode from './component/addNode.vue'

import { useRoute } from 'vue-router'

let nowVal = ref(100);
let nodeConfig = ref({});
watch(nodeConfig, (nodeConfig) => {
  console.log(nodeConfig);
}, {
  deep: true
});

onMounted(async () => {
  let route = useRoute()
  let { data } = await getWorkFlowData({ workFlowDefId: route.query.workFlowDefId })
  nodeConfig.value = data.nodeConfig;
});

const zoomSize = (type) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return;
    }
    nowVal.value -= 10;
  } else {
    if (nowVal.value == 300) {
      return;
    }
    nowVal.value += 10;
  }
};
</script>

<style>
@import url(../../theme/workflow/workflow.scss);
</style>